<!-- 
  删除确认框：
  @param superstratum：控制模态框显示隐藏
  @param queren：确认删除
  @param conse：取消删除、关闭模态框
 -->
 <!-- 
  使用：
  <dele :superstratum="superstratum" @queren="quit" @conse="superstratum = false" title="退出登录"></dele>
  -->
  <template>
    <div class="dele">
      <!-- 弹出层 -->
      <div :class="['Popup', superstratum ? 'openActive' : '']">
        <!-- 内容 -->
        <div class="coutent">
          是否要{{title}}
        </div>
        <div class="btn">
          <button @click="conse">取消</button>
          <button @click="queren">确认</button>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div v-show="superstratum" class="MaskCss" @click="conse"></div>
    </div>
  </template>
  <script>
  export default {
    name: '',
    components: {
  
    },
    mixins: [],
    props: {
      superstratum: Boolean,
      title:String
    },
    methods: {
      queren() {
        this.$emit('queren')
      },
      conse() {
        this.$emit('conse')
      }
    }
  };
  </script>
  <style lang='scss' scoped>
  //****************SKU
  .dele {
    height: 100%;
    box-sizing: border-box;
  }
  
  /* 弹出层默认样式 */
  .Popup {
    width: 300px;
    height: 200px;
    border-radius: 20px;
    background: white;
    position: fixed;
    left: 5%;
    bottom: -500px;
    z-index: 11000;
    transition: all 0.25s linear;
    box-sizing: border-box;
  
    .coutent {
      text-align: center;
      line-height: 150px;
    }
  
    .btn {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
      display: flex;
      justify-content: space-around;
  
      button {
        padding: 5px 10px;
        border: none;
        border-radius: 10px;
        color: #fff;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        -webkit-user-select: none;
        outline: 0;
      }
  
      button:nth-child(1) {
        background-color: #F56C6C;
      }
  
      button:nth-child(2) {
        background-color: #409EFF;
      }
    }
  }
  
  /* 点击按钮是将盒子 bottom 值归零即可实现弹出效果,
  同理，如需更改弹出方向只需将bottom改成top、left、right即可
  (默认样式的方向也需一起更改哦) */
  .openActive {
    bottom: 40% !important;
  }
  
  /* 遮罩层样式 */
  .MaskCss {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    box-sizing: border-box;
  }</style>